import React, { ChangeEvent } from "react";
import todoListStore from "../../store/todoListStore";
import { observer } from "mobx-react";

function Footer() {
  const { already, total } = todoListStore;
  const handle3 = (e: ChangeEvent) => {
    todoListStore.alChecked((e.target as HTMLInputElement).checked);
  };
  const handle4 = () => {
    todoListStore.alDelList();
  };
  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" checked={already === total && total !== 0} onChange={handle3} />
      </label>
      <span>
        <span>已完成{already}</span> / 全部{total}
      </span>
      <button className="btn btn-danger" onClick={handle4} style={{ display: total ? "block" : "none" }}>
        清除已完成任务
      </button>
    </div>
  );
}
export default observer(Footer);
